<template>
  <div>
    <h2>人员信息</h2>
    <h3>姓名:{{ personName }}</h3>
    <h3>姓名:{{ personAge }}</h3>
    <input type="submit" @click="showPerson" />
  </div>
</template>
<script>
export default {
  name: "PersonInfo",
  data() {
    return {
      personName: "张三",
      personAge: 18,
    };
  },
  methods: {
    showPerson() {
      alert(`我叫${this.personName},今年${this.personAge}`);
    },
  },
};
</script>
<style>
h2 {
  width: 200px;
  background-image: linear-gradient(
    90deg,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
  padding: 10px;
  color: white;
  border: 1px salmon solid;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 10px;
}
h3 {
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  padding: 30px;
  width: 200px;
  margin: 0 auto;
  margin-top: 10px;
}
input {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
  text-align: center;
  margin-top: 10px;
}
</style>
